<template>
  <div>
    <el-dialog
      title="预览"
      :visible.sync="playIsDialog_c"
      @close="resetForm('formName')"
      width="800px"
    >
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="formName"
        label-width="120px"
        class="demo-ruleForm"
      >
        <div id="main-div" class="hello-ezuikit-js"></div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="resetForm('formName')">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script type="text/ecmascript-6">
import EZUIKit from "ezuikit-js";

import { getVideoMonitorYs } from "@/api/video";

export default {
  props: {
    addEditId: {
      type: String,
      default: "",
    },
    playIsDialog: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      ruleForm: {
        // 表单字段
        id: "",
      },
      rules: {},
      playIsDialog_c: false, // 弹窗是否显示
      player: null,
    };
  },
  watch: {
    playIsDialog(val) {
      this.playIsDialog_c = val;
      if (this.playIsDialog_c) {
        // 获取详情
        this.getDetail();
      }
    },
  },
  methods: {
    // 详情
    getDetail() {
      getVideoMonitorYs({ id: this.addEditId }).then((res) => {
        if (res.code == 200) {
          this.ruleForm = res.data;

          // 初始化
          this.initEZUIKit();
        }
      });
    },
    // 取消
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.$parent.closePlay();

      // 停止
      if (this.player != null) {
        this.player.stop();
      }
    },
    // 初始化
    initEZUIKit() {
      // 移除
      let p = document.getElementById("main-div");
      let v = document.getElementById("video-container");
      if (v != null) {
        console.log("移除旧div");
        p.removeChild(v);
      }

      // 添加
      console.log("添加新div");
      var s = document.createElement("div");
      s.id = "video-container";
      s.style.width = "100%";
      s.style.height = "auto";
      s.style.minHeight = "400px";
      p.appendChild(s);

      console.group("mounted 组件挂载完毕状态===============》");
      this.player = new EZUIKit.EZUIKitPlayer({
        autoplay: true,
        id: "video-container",
        accessToken: this.ruleForm.accessToken,
        url: this.ruleForm.playEzopen,
        template: "simple", // simple - 极简版;standard-标准版;security - 安防版(预览回放);voice-语音版；
        // 视频上方头部控件
        //header: ["capturePicture", "save", "zoom"], // 如果templete参数不为simple,该字段将被覆盖
        //plugin: ['talk'],                       // 加载插件，talk-对讲
        // 视频下方底部控件
        footer: ["hd", "fullScreen"], // 如果template参数不为simple,该字段将被覆盖
        // audio: 1, // 是否默认开启声音 0 - 关闭 1 - 开启
        // openSoundCallBack: data => console.log("开启声音回调", data),
        // closeSoundCallBack: data => console.log("关闭声音回调", data),
        // startSaveCallBack: data => console.log("开始录像回调", data),
        // stopSaveCallBack: data => console.log("录像回调", data),
        // capturePictureCallBack: data => console.log("截图成功回调", data),
        // fullScreenCallBack: data => console.log("全屏回调", data),
        // getOSDTimeCallBack: data => console.log("获取OSDTime回调", data),
        // width: 600,
        // height: 400,
      });
    },
  },
};
</script>

<style lang="less" scoped>
.demo-ruleForm {
  width: 95%;
  margin: 0 auto;
  padding-top: 10px;

  .el-input-number {
    width: 100%;
  }
}
</style>
